<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <style>
        .score-case {
            width: 1000px;
            margin: 50px auto;
            display: flex;
        }

        .score-case .table {
            flex: 4;
        }

        .score-case .table table {
            width: 100%;
            border-spacing: 0;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        .score-case .table table th {
            background: #f5f5f5;
        }

        .score-case .table table tr:hover td {
            background: #f5f5f5;
        }

        .score-case .table table td,
        .score-case .table table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            text-align: center;
            padding: 10px;
        }

        .score-case .table table td.red,
        .score-case .table table th.red {
            color: red;
        }

        .score-case .table .none {
            height: 100px;
            line-height: 100px;
            color: #999;
        }

        .score-case .form {
            flex: 1;
            padding: 20px;
        }

        .score-case .form .form-item {
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }

        .score-case .form .form-item .label {
            width: 60px;
            text-align: right;
            font-size: 14px;
        }

        .score-case .form .form-item .input {
            flex: 1;
        }

        .score-case .form .form-item input,
        .score-case .form .form-item select {
            appearance: none;
            outline: none;
            border: 1px solid #ccc;
            width: 200px;
            height: 40px;
            box-sizing: border-box;
            padding: 10px;
            color: #666;
        }

        .score-case .form .form-item input::placeholder {
            color: #666;
        }

        .score-case .form .form-item .cancel,
        .score-case .form .form-item .submit {
            appearance: none;
            outline: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 4px 10px;
            margin-right: 10px;
            font-size: 12px;
            background: #ccc;
        }

        .score-case .form .form-item .submit {
            border-color: #069;
            background: #069;
            color: #fff;
        }

    </style>
</head>
<body>
    <div id="app" class="score-case">
        <div class="table">
            <table>
                <thead>
                <tr>
                    <th>编号</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody v-if="list.length > 0">
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.subject }}</td>
                        <td :class="{red: item.score < 60}">{{ item.score }}</td>
                        <td><a href="#" @click="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        <td colspan="5">
                            <span class="none">暂无数据</span>
                        </td>
                    </tr>
                </tbody>

                <tfoot>
                <tr>
                    <td colspan="5">
                        <span>总分：{{ totalScore }}</span>
                        <span style="margin-left: 50px">平均分：{{ avgScore }}</span>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <div class="form">
            <div class="form-item">
                <div class="label">科目：</div>
                <div class="input">
                    <input
                            type="text"
                            placeholder="请输入科目"
                            v-model.trim="subject"
                    />
                </div>
            </div>
            <div class="form-item">
                <div class="label">分数：</div>
                <div class="input">
                    <input
                            type="text"
                            placeholder="请输入分数"
                            v-model.trim.number="score"
                    />
                </div>
            </div>
            <div class="form-item">
                <div class="label"></div>
                <div class="input">
                    <button class="submit" @click="add">添加</button>
                </div>
            </div>
        </div>
    </div>
    <script src="../utils/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, subject: '语文', score: 20 },
                    { id: 7, subject: '数学', score: 99 },
                    { id: 12, subject: '英语', score: 70 },
                ],
                subject: '',
                score: ''
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item => item.id !== id)
                },
                add() {
                    if (!this.subject) {
                        alert('请输入科目')
                        return
                    }
                    if (typeof this.score !== 'number') {
                        alert('请输入正确的成绩')
                        return
                    }
                    this.list.push({
                        id: +new Date(),
                        subject: this.subject,
                        score: this.score
                    })
                    this.subject = ''
                    this.score = ''
                }
            },
            computed: {
                avgScore() {
                    if (this.list.length === 0) return 0
                    return (this.totalScore / this.list.length).toFixed(2)
                },
                totalScore() {
                    return this.list.reduce((sum, item) => sum + item.score, 0)
                }
            }
        })
    </script>
</body>
</html>
